import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
import { Card } from "antd";

const timeTypeStrs = {
  date: "昨日",
  week: "上周",
  month: "上月",
  year: "去年",
};

const timeTypeStrs2 = {
  date: "日",
  week: "周",
  month: "月",
  year: "年",
};

function StatisticsCard(props) {
  return (
    <Card hoverable>
      <div style={{ display: "flex", alignItems: "center" }}>
        <div style={{ fontSize: 32, color: "#52c41a", marginRight: 16 }}>
          {props.icon}
        </div>
        <div>
          <div style={{ color: "rgba(0,0,0,.45)" }}>{props.name}</div>
          <div style={{ fontSize: 24, fontWeight: "bold" }}>
            {(props.data ?? "") + props.suffix}
          </div>
          <div>
            {props.mom != null ? (
              props.mom > 0 ? (
                <>
                  <ArrowUpOutlined style={{ color: "#52c41a" }} />
                  <span style={{ marginLeft: 8, color: "#52c41a" }}>
                    {(props.mom == null ? "" : props.mom) +
                      `% ${timeTypeStrs2[props.activeTab]}同比`}
                  </span>
                </>
              ) : (
                <>
                  <ArrowDownOutlined style={{ color: "#cf1322" }} />
                  <span style={{ marginLeft: 8, color: "#cf1322" }}>
                    {(props.mom == null ? "" : props.mom) +
                      `% ${timeTypeStrs2[props.activeTab]}同比`}
                  </span>
                </>
              )
            ) : (
              <>
                <ArrowUpOutlined style={{ color: "#52c41a" }} />
                <span style={{ marginLeft: 8, color: "#52c41a" }}>{`暂无${
                  timeTypeStrs[props.activeTab]
                }数据`}</span>
              </>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}

export default StatisticsCard;
